import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';
import { FormattedMessage} from 'react-intl';

class App extends React.Component { 
	constructor(props) {
		super(props);
        this.state={
            H: 0,
            Wh: document.documentElement.clientHeight,
            policyList: [],
            fundList: []
        }
	}

	componentDidMount(){
        let H = document.querySelector('.investment').offsetHeight;
        this.setState({H});
        this.requestData();

    }

    requestData = () => {
        T.fetch({   //获取用户基金列表
            url:'/policy/fundList.json',
            method: 'get',
            loading: true,
        }).then((res)=>{
            if(res.success){
                let data = res.value || {};
                this.setState({
                    policyList: data.policyList,
                    fundList: data.fundList
                })
            }
        })
    }

    transNum = (str) => {
        if(str =='')return '';
        return Math.round(Number(str) * 100) / 100;
    }

	render() {
        const {H, Wh, policyList, fundList} = this.state;
        let styles = {};
        // if(H!=0 && H < Wh){
        //     styles.height = `${Wh}px`;
        // }else{
        //     styles = {}
        // }
        return (<div className="investment">
            <h2 className="tac f47">Policy Information</h2>
            <ul className="list-ul">
                {
                    policyList.length == 0 ? (<li className="list-li">
                    <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15"></span></p>
                    <i className="icon-state-1"></i>
                    <i className="icon-half-right"></i>
                    <i className="icon-half-left"></i>
                    <ul className="fc9 f32 pb20">
                        <li className="mt30 ml15 tac">Not found</li>
                    </ul>
                </li>) : policyList.map((item, index)=>{
                        return (<li key={index} className="list-li">
                            <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15">{`NO.${index+1}`}</span></p>
                            <i className="icon-state-1"></i>
                            <i className="icon-half-right"></i>
                            <i className="icon-half-left"></i>
                            <ul className="fc9 f32 pb20">
                                <li className="mt30 ml15">{`Insurer：Prudential Thailand`}</li>
                                <li className="mt30 ml15">{`Main Product：${item.issuarePlanName}`}</li>
                                <li className="mt10 ml15">{`Policy Code: ${item.policyNo}`}</li>
                            </ul>
                        </li>)
                    })
                    
                }
            </ul>
            <h2 className="tac f47">Investment Information</h2>
            <ul className="list-ul">
                {
                    fundList.length == 0 ? (<li className="list-li">
                    <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15"></span></p>
                    <i className="icon-state-1"></i>
                    <i className="icon-half-right"></i>
                    <i className="icon-half-left"></i>
                    <ul className="fc9 f32 pb20">
                        <li className="mt30 ml15 tac">Not found</li>
                    </ul>
                </li>) : fundList.map((item, index)=>{
                        return (<li key={index} className="list-li">
                            <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15">{`NO.${index+1}`}</span></p>
                            <i className="icon-state-1"></i>
                            <i className="icon-half-right"></i>
                            <i className="icon-half-left"></i>
                            <ul className="fc9 f32 pb20">
                                <li className="mt30 ml15">{`Fund：${item.fundName}`}</li>
                                <li className="mt10 ml15">{`Current Value: ${this.transNum(item.fundAmount)} THB`}</li>
                            </ul>
                        </li>)
                    })
                    
                }
            </ul>
        </div>)
	}
}

export default App;